<template>
	<view class="content">
		<stopModal/>
		<cu-custom :noDiv="true">
		    <block slot="content" style="color: #FFFFFF;font-size: 20px;">中奖纪录</block>
		</cu-custom>
		<view class="top-container">
			<view class='top-bkg'  :style="[{height:CustomBar + 152 + 'px'}]">
				<img class="bkg-img" src="@/static/img/img_navbar_red@2x.png" alt="">
			</view>
			<view class="user-msg" :style="[{position: 'absolute', top:CustomBar + 15 + 'px'}]">
				<view class="flex-area">
					<view class="msg">
						<view v-if="!authflag.getPhoneNumber">
							<wxAuthPhone :authType="authType" class="msg">
								<view class="msg">
									<img class="avatar" src="@/static/index/img_64_to_log_in@2x.png" alt="">
									<view class="desc">点击登录</view>
								</view>
							</wxAuthPhone>
							
						</view>
						<view v-else-if="!authflag.getUserInfo">
							<wxAuthAvatar :authType="authType" class="msg">
								<view class="msg">
									<img class="avatar" src="@/static/index/img_64_to_log_in@2x.png" alt="">
									<view class="desc authed">
										布鲁可推荐大使
										<view class="phone">{{returnPhone}}</view>
									</view>
								</view>
							</wxAuthAvatar>
						</view>
						<view v-else>
							<view class="msg">
								<view class="avatar">
									<open-data type="userAvatarUrl"></open-data>
								</view>
								<!-- <img class="avatar" :src="userinfo.avatar" alt=""> -->
								<view class="desc authed">
									<!-- <open-data type="userNickName"></open-data> -->
									布鲁可推荐大使
									<view class="phone">{{returnPhone}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="change-phone" v-if="authflag.getPhoneNumber">
						<view class="change-phone" @click="unbindPhone">
							<img src="@/static/icon/icon_16_change_w@2x.png" alt="">
							切换用户
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="shop-list">
			<view class="title-area">
				<img class="title-img" src="@/static/img/img_title_winning_record@2x.png" alt="">
			</view>
			<view class="items">
				<!-- 任务的循环展示 -->
				<view v-if="!dataList || dataList.length == 0 || !authflag.getPhoneNumber" class="no-data">
					<img class="no-data-img" src="@/static/img/img_108_bobo_sigh@2x.png" alt="">
					<view class="desc">
						<view class="desc-title">还没有中奖纪录</view>
						<view>赶快去完成推荐任务参与抽奖吧</view>
					</view>
					<view class="next-btn" @click="switchIndex">
						<view>去做任务</view>
					</view>
				</view>
				
				<view v-else>
					<view v-for="(item, index) in dataList" :key="index">
						<view class="item" >
							<view class="item-top">
								<view class="top-left">
									<img class="icon" src="@/static/icon/icon_12_clock_g@2x.png" alt="">
									{{resolvingDate(item.created_at)}}
								</view>
								<view class="top-right" v-if="item.status == 0">
									<img class="icon" src="../../static/icon/icon_16_seal_r@2x.png" alt="">
									待审核
								</view>
								<view class="top-right pass" v-else>
									<img class="icon" src="../../static/icon/icon_16_tick_r@2x.png" alt="">
									审核通过
								</view>
							</view>
							<view class="item-desc-area">
								<img v-if="item.prize.cover_url" class="item-img" :src="item.prize.cover_url" alt="">
								
								<img v-else class="item-img" src="../../static/img/img_goods_empty.jpg" alt="">
								<view class="item-desc">
									<view class="item-title">{{item.prize.title}}</view>
									<view class="desc">{{item.prize.sub_title}}</view>
									<view class="price-area">
										<view class="price"><text class="icon">¥</text>{{item.prize.price}}</view>
										<view class="num">x 1</view>
									</view>
								</view>
							</view>
							<view class="item-bottom" v-if="item.status == 2 || item.status == 1" @click="receive(item)">
								<view class="empty"></view>
								<view class="button">领取奖品</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	import httpConfig from '@/config/httpConfig.js'
	import stopModal from "@/components/modal/stop_modal.vue";
	export default {
		components: {
			stopModal
		},
		computed:{
			...mapState(['authflag','userinfo']),
			returnPhone () {
			  return this.formatPhone(this.userinfo.mobile)
			}
		},
		
		
		data() {
			return {
				authType:['getUserInfo', 'getPhoneNumber'],
				title: 'Hello',	
				dataList: [],
				CustomBar: this.CustomBar
			}
		},
		async onLoad(option) {
			//等待登录成功	
			await this.$onLaunched;
			console.log('页面逻辑开始了')
			// 后续业务逻辑
			this.getList()
			uni.$on("redresh_ucenter", () => {
				this.getList()
			});
			
		},
		onShow() {
			this.getList()
		},
		
		methods: {
			receive(item){
				console.log(item)
				let code = item.code
				let codeUrl = item.prize.code_url
				let id = item.id
				let params = {
					code,
					codeUrl,
					id
				}
				uni.navigateTo(
					{
						url:'/pages/cashprize/cashprize?params='+encodeURIComponent(JSON.stringify(params))
					}
				)
				
			},
			resolvingDate(date){
				if(!date){
					return;
				}
			  let d = new Date(date * 1000);
			
			  let month = (d.getMonth() + 1) < 10 ? '0'+(d.getMonth() + 1) : (d.getMonth() + 1);
			  let day = d.getDate()<10 ? '0'+d.getDate() : d.getDate();
			  let hours = d.getHours()<10 ? '0'+d.getHours() : d.getHours();
			  let min = d.getMinutes()<10 ? '0'+d.getMinutes() : d.getMinutes();
			  let sec = d.getSeconds()<10 ? '0'+d.getSeconds() : d.getSeconds();
			
			  let times;
				times=d.getFullYear() + '/' + month + '/' + day + ' ' + hours + ':' + min + ':' + sec;
			  return times
			},

			getList(){
				this.$api.getUserPrize().then(res => {
					this.dataList = res
					
					// 后面的，如果这个code 为空你就请求接口；如果不为空 就直接展示 ，说明已经给他码了
				})
			},
			formatPhone(str){
				let str2 = str.substr(0,3)+"****"+str.substr(7); 
				return str2
			},
			unbindPhone(){
				uni.showModal({
				    title: '',
				    content: '确认退出当前帐号吗？',
				    success:  (res) =>{
				        if (res.confirm) {
				            this.$api.unbindUserPhone({
				            	client_id: httpConfig.server.appId
				            }).then(res => {
				            	this.$store.dispatch("set_authflag", {
				            		getUserInfo: false,
				            		getPhoneNumber: false,
				            		bindDouyin: false,
				            		hasShop: false 
				            	})
								this.dataList = []
				            	this.login()
				            })
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
				
			},
			login(){
				uni.login({
					provider: 'weixin',
					success: res => {
						let params = {
							client_id: httpConfig.server.appId,
							code: res.code,
						}
						let timestamp = Date.parse(new Date());
						console.log('获取 token  的时间戳', timestamp)
						
						this.$api.getToken(params).then(res => {
							if(res) {
								let tokenRefreshTime = (res.expire_in -  120) * 1000 + timestamp
								this.$store.dispatch("set_token_refresh_time", tokenRefreshTime)
								this.$store.dispatch("set_userinfo", res)
								let getUserInfo = false
								let getPhoneNumber = false
								if(res.avatar !='' && res.nickname !='') getUserInfo = true
								if(res.mobile !='') getPhoneNumber = true
								console.log(res.uid)
								this.$store.dispatch("set_authflag", {
									getUserInfo, 
									getPhoneNumber
								})
							}
						})
					},
					fail(err) {
						console.log('获取 code 失败')
					}
				})
			},
			switchIndex(){
				uni.switchTab({
				    url: '/pages/index/index'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.content{
		background-color: #FFFFFF;
		min-width: 100vw;
		min-height: 100vh;
		.top-container{
			.top-bkg{
				// height: 432rpx;
				// background-color: #D0021B;
				.bkg-img{
					width: 100%;
					height: 100vw;
				}
			}
			.user-msg{
				// position: absolute;
				// top: 180rpx;
				.flex-area{
					display: flex;
					width: 100vw;
					padding: 0 4.2vw;
					align-items: center;
					align-content: space-between; 
					.msg{
						flex: 1;
						display: flex;
						align-items: center;
						.avatar{
							border: 5rpx solid #FFFFFF;
							width: 76px;
							height: 76px;
							border-radius: 50%;
							overflow: hidden;
						}
						.desc{
							font-size: 4.2vw;
							color: #FFFFFF;
							padding-left: 4.2vw;
							&.authed{
								line-height: 50rpx;
								font-size: 18px;
								.phone{
									height: 40rpx;
									line-height: 40rpx;
									font-size: 28rpx;
									margin-top: 4rpx;
								}
							}
						}
					}
					.change-phone{
						width: 48px;
						text-align: center;
						img{
							width: 16px;
							height: 16px;
							display: block;
							margin: 0 auto 2px;
						}
						font-size: 12px;
						color: #FFBFC6;
					}
				}
				
			}
		}
		.shop-list{
			position: relative;
			background: #FFFFFF;
			border-radius: 20px 20px 0 0 ;
			margin-top: -20px;
			min-height: 60vh;
			.title-area{
				.title-img{
					width: 100%;
					height: 19vw;
					margin-top: -7vw;
				}
			}
			.items{
				text-align: center;
				margin: 0 32rpx;
				padding-bottom: 32rpx;
				.item{
					margin-top: 24rpx;
					border-radius: 16rpx;
					overflow: hidden;
					padding: 0 24rpx;
					border-radius: 16rpx;
					background: #F5F5F5;
					// margin-bottom: 24rpx;
					.item-top{
						height: 80rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						justify-content: space-between;
						border-bottom: 1px solid #EBEBEB;
						.top-left{
							font-size: 24rpx;
							font-weight: 500;
							display: flex;
							align-items: center;
							justify-content: center;
							.icon{
								width: 32rpx;
								height: 32rpx;
								margin-right: 4rpx;
							}
						}
						.top-right{
							width: 148rpx;
							height: 48rpx;
							background: #FFFFFF;
							border-radius: 24rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							.icon{
								width: 32rpx;
								height: 32rpx;
								margin-right: 6rpx;
							}
							&.pass{
								width: 174rpx;
							}
						}
					}
					.item-desc-area{
						display: flex;
						border-radius: 20rpx;
						padding: 24rpx 0;
						.item-img{
							width: 128rpx;
							height: 128rpx;
							flex-shrink:0;
							border-radius: 8rpx;
						}
						.item-desc{
							flex: 1;
							padding-left: 16rpx;
							max-width: 500rpx;
							text-align: left;
							.item-title{
								height: 40rpx;
								line-height: 40rpx;
								font-size: 28rpx;
								color: #333333;
								white-space:nowrap;
								overflow:hidden;
								text-overflow:ellipsis;
								font-weight: 500;
							}
							.desc{
								margin-top: 4rpx;
								height: 34rpx;
								line-height: 34rpx;
								font-size: 24rpx;
								color: #999999;
								font-weight: 500;
								white-space:nowrap;
								overflow:hidden;
								text-overflow:ellipsis;
							}
							.price-area{
								height: 44rpx;
								line-height: 44rpx;
								width: 100%;
								display: flex;
								justify-content: space-between;
								.price{
									font-size: 32rpx;
									color: #F82045;
									font-weight: 500;
									.icon{
										font-size: 24rpx;
										margin-right: 4rpx;
									}
								}
								.num{
									line-height: 54rpx;
									font-size: 24rpx;
									color: #959595;
									font-weight: 500;
								}
							}
						}
					}
					.item-bottom{
						height: 104rpx;
						line-height: 104rpx;
						border-top: 1px solid #EBEBEB;
						display: flex;
						justify-content: space-between;
						.button{
							width: 108px;
							height: 56px;
							line-height: 56px;
							text-align: center;
							background: url('@/static/btn/btn_28_red_108_shadow_nor@2x.png');
							background-size: 108px 56px;
							background-repeat: no-repeat;
							font-size: 28rpx;
							color: #FFFFFF;
							text-shadow: 0 1px 2px rgba(0,0,0,0.25);
							font-weight: 500;
						}
					}
				}
				.no-data{
					.no-data-img{
						width: 108px;
						height: 108px;
						margin-top: 72px;
					}
					.desc{
						font-size: 12px;
						color: #999999;
						line-height: 20px;
						font-weight: 500;
						margin-top: 2px;
						.desc-title{
							height: 32px;
							font-size: 20px;
							color: #333333;
							text-align: center;
							line-height: 32px;
							margin-top: 4px;
						}
					}
					.next-btn{
						width: 152px;
						height: 56px;
						margin: 16px auto 0;
						text-align: center;
						line-height: 56px;
						background: url('@/static/btn/btn_32_red_152_shadow_nor@2x.png');
						background-size: 152px 56px;
						background-repeat: no-repeat;
						color: #FFFFFF;
					}
				}
			}
		}
	}
</style>
